<template>
  <div>
    <el-skeleton :loading="loading" animated>
      <template slot="template">
        <div style="display: flex;flex-flow: column wrap;align-items: center">
          <el-skeleton-item variant="h2" style="width: 200px;height: 40px;margin: 15px 0;display: block"/>
          <el-skeleton-item variant="text" style="width: 150px;height: 20px;"/>
          <el-skeleton-item variant="h2" style="width: 200px;height: 40px;margin: 15px 0;display: block"/>
          <el-skeleton-item variant="button" style="width: 200px;height: 200px"/>
          <p style="text-align: center;color: #a4a4a4;">
            <el-skeleton-item variant="p" style="width: 100px;height: 30px;"/>
          </p>
        </div>
      </template>
      <template>
        <div style="text-align: center">
          <h2>浏览器下载APK</h2>
          <a href="/"
             download="无奇不邮.apk">本地下载</a>
          <h2>手机扫码下载</h2>
          <img src="@/assets/code.png" alt="二维码下载"/>
          <p style="text-align: center;color: #a4a4a4;">当前版本:
            <el-tag type="info">v1.0.0</el-tag>
          </p>
        </div>
      </template>
    </el-skeleton>
  </div>
</template>

<script>
import {mapActions, mapGetters} from "vuex";

export default {
  name: "AppDownload",
  data() {
    return {}
  }, mounted() {
    this.asyncChangeTempLoading(false);
  },
  methods: {
    ...mapActions({asyncChangeTempLoading: 'asyncChangeTempLoading'})
  },
  computed: {
    ...mapGetters({loading: "getTempLoading"})
  }
}
</script>

<style scoped>

.down-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 200px;
  color: #565656;
  text-decoration: none;
  border-radius: 6px;
  margin-top: 10px;
  box-shadow: rgba(164, 164, 164, 0.3) 0 0 8px;
}
</style>